<template>
  <div>
    <div class="redpacket">
      <section class="list_item">
        <div class="list_item_left">
          <span>¥</span><span>{{ String(data.amount).split('.')[0] }}</span>
          <span>.</span>
          <span>{{ String(data.amount).split('.')[1] || 0 }}</span>
          <p>满 {{ this.data.sum_condition }} 元可用</p>
        </div>
        <div class="list_item_right">
          <h4>{{ this.data.name }}</h4>
          <p>{{ this.data.end_date }}到期</p>
          <p>限收货手机号为 {{ this.data.phone }}</p>
        </div>
        <div class="time_left">已过期</div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
}
</script>

<style scoped lang='less'>
* {
  padding: 0;
  margin: 0;
}
.redpacket {
  .list_item {
    background: #fff url(~@/images/expired.png) repeat-x;
    border-radius: 8px;
    padding: 20px !important;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    .list_item_left {
      font-size: 0;
      border-right: 0.025rem dotted #ccc;
      flex: 1;
      span:nth-of-type(1) {
        font-size: 0.75rem;
        color: #ccc;
        font-weight: bold;
      }
      span:nth-of-type(2) {
        font-size: 1.5rem;
        color: #ccc;
      }
      span:nth-of-type(3),
      span:nth-of-type(4) {
        font-size: 0.8rem;
        color: #ccc;
        font-weight: bold;
      }
      p {
        font-size: 0.4rem;
        color: #ccc;
      }
    }
    .list_item_right {
      flex: 2;
      margin-left: 1.5rem;
      h4 {
        font-size: 0.7rem;
        color: #ccc;
        margin-left: -0.7rem;
      }
      p {
        list-style-type: disc;
        margin-left: -0.7rem;
        font-size: 0.4rem;
        color: #ccc;
      }
    }
    .time_left {
      font-size: 0.75rem;
      color: #ccc;
    }
  }
}
</style>